<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/js/DateTimePicker.js"></script>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>
   	<script src="${ctxStatic}/dateCalendar/WdatePicker.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
    <link rel="stylesheet" href="${ctxStatic}/css/list.css">
    <script>
 // 下拉选框带搜索功能
    $(document).ready(function() {
    	$("#inventoryCategory").select2();
    	searchListForm();
    });
	$(function(){
        $(".tabBox ul li").each(function(){
            var index=$(this).index();

            $(".tabBox ul li").eq(0).addClass("active");

            $(this).click(function(){

                $(this).addClass("active").siblings().removeClass("active");
                
                $(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
				
				var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
				var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
				var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
				if(tabodyH>tableScrollH){
					$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
				}else{
					$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
				}

            })

        })

    });
        //检索 
    function searchListForm() {
    	var params = $("#searchForm").serialize();
    	$("#activity_pane").showLoading();
		$.post("${ctx}/init/customer/searchList",params, function(result) {
			var listHtml = result["initCustomer"];
			var pageHtml = result["page"];
			$("#listHtml").html(listHtml);
			$("#paging").html(pageHtml);
			$("#activity_pane").hideLoading();
		}, 'json');
	}
        
	//重置
	function clean() {
		$("#ognizationName").val("");
		$("#dateStart").val("");
		$("#dateEnd").val("");
		searchListForm();
	}   
    </script>
    
    <style type="text/css">
    

    
    </style>
</head>
<body>
<form id="searchForm">
<div class="listArea" id="activity_pane">
	<div class="listBg">
        <div class="searchArea clearfix">
            <div class="searchLeft clearfix">
                <div class="searchInp clearfix">
                <!-- 供货商 -->
                    <p><spring:message code="init_supplier_supplier" /></p>
                    <input type="text" id="ognizationName" name="ognization.ognizationName"/>
                </div>
                 <!-- 日期 -->
                <div class="searchInp clearfix">
                    <p><spring:message code="init_supplier_Date"/></p>
                    <div class="timeBox">
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy',onpicked:null})"
								id="dateStart" name="dateYear" style="width: 70px">
							<p class="list">~</p>
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'MM',onpicked:null})" 
								id="dateEnd" name="dateMonth" style="width: 70px" >
                    </div> 
                </div>
            </div>
            <div class="searchRight clearfix">
                <button type="button" onclick="searchListForm();"><spring:message code="commom_check" /></button>
                <button type="button" onclick="clean();"><spring:message code="common_reset" /></button>                
            </div>
        </div>
    </div>
	<input type="hidden" id="ognizationType" name="ognization.ognizationType" value="4"/>
    <div class="tabBox">
        <ul class="clearfix">
            <!-- 供货商 -->
            <li class="active" value="4"><spring:message code="init_supplier_All" /></li>
        </ul>
	</div>
     <div class="listBg tabPadding overflowX">
        <div class="tableArea tabBoxSm">
            <div class="tableScrollSm" style="height:650px;width: 960px;overflow: auto;padding-top: 90px;">
                <table cellpadding="0" class="tableHead">
                    <thead>
                    <tr>
                    	<!-- No. -->
                        <th rowspan="2"><p class="width-80px"><spring:message code="init_supplier_No"/></p></th>                        
                        <!-- 供货商名称 -->
                        <th rowspan="2"><p class="width-150px"><spring:message code="init_supplier_supplierName" /></p></th>
                        <!-- 业务期间 -->
                        <th rowspan="2"><p class="width-100px"><spring:message code="init_supplier_financePeriod" /></p></th>                                             
                        <!-- 期初 -->
                        <th colspan="2"><p class="width-200px"><spring:message code="init_supplier_initial" /></p></th>
                        <!-- 本期 -->
                        <th colspan="2"><p class="width-200px"><spring:message code="init_supplier_period" /></p></th>
                        <!-- 实际-->
                        <th colspan="2"><p class="width-200px"><spring:message code="init_supplier_real" /></p></th>
                    </tr>
                    <tr>
                        <!-- 借方 -->
                        <th><p class="width-100px"><spring:message code="init_supplier_debitAmount" /></p></th>
                        <!-- 贷方 -->
                        <th><p class="width-100px"><spring:message code="init_supplier_creditAmount" /></p></th>
                        <!-- 借方-->
                        <th><p class="width-100px"><spring:message code="init_supplier_debitAmount" /></p></th>
                        <!-- 贷方 -->
                        <th><p class="width-100px"><spring:message code="init_supplier_creditAmount" /></p></th>
                        <!-- 借方 -->
                        <th><p class="width-100px"><spring:message code="init_supplier_debitAmount" /></p></th>
                        <!-- 贷方 -->
                        <th><p class="width-100px"><spring:message code="init_supplier_creditAmount" /></p></th>
                         
                    </tr>
                    </thead>
                </table>
                <table cellpadding="0" class="tableBody">
                    <tbody id="listHtml">
                    </tbody>
                </table>
            </div>
            
        </div>
    </div>
    <div id = "paging" ></div>
</div>
</form>   
<script type="text/javascript">
</script> 
</body>
</html>
